<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h1>学员信息导入</h1>
        </div>
      </template>
      <div class="students">
        <p class="color-red p1 line-height-10 m-l-6">
          先下载数据维护模板excel，在excel文件内维护好学员数据（注意：不要调整列顺序，不要增加减少导入项）
        </p>
        <p class="color-red p1 line-height-10 m-l-6">
          excel表中：学员照片可暂时不填写
        </p>
      </div>
      <el-row class="m-t-5 m-b-5">
        <el-button type="success" size="large" @click="handleExcel"
          >下载学员档案模版</el-button
        >
        <el-upload
          class="avatar-uploader"
          :http-request="handleInsert"
          :show-file-list="false"
        >
          <el-button type="primary" size="large">导入学员信息</el-button>
        </el-upload>
      </el-row>
    </el-card>
    <div ref="student"></div>
  </div>
</template>

<script setup lang="ts">
import { excelImport } from "../../utils/excel";
import { ref } from "vue";
//导入学员信息
const student = ref();
const handleInsert = (info: any) => {
  excelImport(info.file, student.value);
};
// 下载学员档案模版
const handleExcel = () => {
  downloadRes();
};

const downloadRes = async () => {
  let response = await fetch(
    "http://lc-Bof1Bhby.cn-n1.lcfile.com/ocQDmyAboalRzorGS0TeIiUgz4XpUQTg/vue-driving-admin.xlsx"
  );
  let blob = await response.blob();
  let objectUrl = window.URL.createObjectURL(blob);
  let a = document.createElement("a");
  a.href = objectUrl;
  a.download = "易驾管-极速导入学员信息";
  a.click();
  a.remove();
};
</script>

<style scoped>
.students {
  box-shadow: -5px 0px 5px #e6e6e6;
}
</style>